import React, {memo, useEffect, useState} from 'react';

import "./index.css";

export default memo(function Slider(props) {
  const {name, max, dec, reverse, efficiencyValue, defaultShowValue, firstType, secondType, getValue} = props;
  const [leftWidth, setLeftWidth] = useState(100);
  const [rightWidth, setRightWidth] = useState(100);
  const [showValue, setShowValue] = useState(defaultShowValue);
  const [leftValue, setLeftValue] = useState(() => efficiencyValue ? efficiencyValue.min : 90);
  const [rightValue, setRightValue] = useState(() => efficiencyValue ? efficiencyValue.max : 110);

  function changeLeft(e) {
    let width = 200 * ((e.target.value - 50) / 100);
    if (width + rightWidth > 200) {
      return;
    }
    setLeftWidth(width);
    setLeftValue(e.target.value);
    getValue && getValue({min: e.target.value, max: rightValue});
  }

    function changeRight(e) {
      let width = 200 - 200 * ((e.target.value - 50) / 100);
      if (width + leftWidth > 200) {
        return;
      }
      setRightWidth(width);
      setRightValue(e.target.value);
      getValue && getValue({min: leftValue, max: e.target.value});
    }

    function changeSingleInput(e) {
      const base = e.target.value;
      const leftWidth = Math.round(200 * (base / max));
      const rightWidth = 200 - leftWidth;
      setShowValue(base);
      setLeftWidth(leftWidth);
      setRightWidth(rightWidth);
      getValue && getValue(base);
    }

    useEffect(() => {
      if (max) {
        const leftWidth = Math.round(200 * (defaultShowValue / max));
        const rightWidth = 200 - leftWidth;
        setShowValue(defaultShowValue);
        setLeftWidth(leftWidth);
        setRightWidth(rightWidth);
      }
      if (secondType) {
        setLeftWidth(200 * ((leftValue - 50) / 100));
        setRightWidth(200 - 200 * ((rightValue - 50) / 100));
      }
    }, []);

    return (
      <div className="slider">
        <div>{name}</div>
        {
          firstType
            ?
            <div className="sliderBtn">
              <div style={{width: 100, color: "#fff", backgroundColor: reverse ? "#50e33c" : "#d01935"}}>NO</div>
              <div style={{width: 100, color: "#fff", backgroundColor: reverse ? "#d01935" : "#50e33c"}}>YES</div>
            </div>
            :
            secondType
              ?
              <div>
                <div
                  style={{width: 200, height: 25, backgroundColor: "#50e33c", marginTop: 6, marginLeft: 50, borderRadius: 15, position: "relative"}}
                  className="secondTypeSlider">
                  <div style={{width: leftWidth, backgroundColor: "#d01935"}}/>
                  <div style={{width: rightWidth, backgroundColor: "#d01935", float: "right"}}/>
                  <div>{leftValue}</div>
                  <div>{rightValue}</div>
                  <input type="range"
                         min={50}
                         max={150}
                         value={leftValue}
                         onChange={e => changeLeft(e)}/>
                  <input type="range"
                         min={50}
                         max={150}
                         value={rightValue}
                         onChange={e => changeRight(e)}/>
                </div>
              </div>
              :
              <div className="sliderBtn">
                <div style={{width: leftWidth, backgroundColor: reverse ? "#50e33c" : "#d01935"}}/>
                <div style={{width: rightWidth, backgroundColor: reverse ? "#d01935" : "#50e33c"}}/>
                <div>{dec ? showValue / 100 : showValue}</div>
                <input type="range"
                       max={max}
                       value={showValue}
                       onChange={e => changeSingleInput(e)}/>
              </div>
        }

      </div>
    );
  }
);